<template>
  <el-menu
    default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#112f50"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
    :collapse="isCollapse"
  >
    <el-menu-item index="2">
      <span slot="title">边缘人管理系统</span>
    </el-menu-item>
    <el-submenu index="/product">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>圈子管理</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="/product/list">
          <i class="el-icon-location">
            <span slot="title">群组管理</span>
          </i></el-menu-item
        >
        <el-menu-item index="/product/goubi">
          <i class="el-icon-location">
            <span slot="title">人脉管理</span>
          </i>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="/order">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>订单详情</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="/order/collect">
          <i class="el-icon-location">
            <span slot="title">订单汇总</span>
          </i></el-menu-item
        >
        <el-menu-item index="/order/listb">
          <i class="el-icon-location">
            <span slot="title">订单列表</span>
          </i>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="/advert">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>广告详情</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="/advert/lista">
          <i class="el-icon-location">
            <span slot="title">广告详情</span>
          </i></el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>

    <el-menu-item index="3">
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  props: ["isCollapse"],
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.el-menu {
  border-right: 0;
  /deep/ .is-active {
    background: pink !important;
    color: #17056c !important;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 50px;
}
</style>
